<template lang="pug">
.container
  .focus-goods-body
    .focus-goods-swiper(v-swiper='swiperConfig')
      .swiper-wrapper
        .swiper-slide(v-for='item in imgs')
          img(:src="'/img/' + item.img")
          .title-box 
            .swiper-title {{item.title}}
          
      .swiper-pagination.swiper-pagination-bullets

  .weui-tab
    .weui-navbar
      .weui-navbar__item(@click="handlePage(1)" :class="[ showPage === 1 ? 'nav-active' : '' ]") 穿搭攻略
      .weui-navbar__item(@click="handlePage(2)" :class="[ showPage === 2 ? 'nav-active' : '' ]") 体型风格
      .weui-navbar__item(@click="handlePage(3)" :class="[ showPage === 3 ? 'nav-active' : '' ]") 发型妆容

    .weui-tab__panel
      div(v-if="showPage === 1")
        .weui-panel_bd(v-for="item in list.list1")
          .weui-media-box.weui-media-box_appmsg
            .weui-media-box__hd
              img.weui-media-box__thumb(:src="'/img/' + item.icon")
            .weui-media-box__bd
                h4.weui-media-box__title {{item.title}}
                p.weui-media-box__desc {{item.intro}}
        .weui-panel__ft
          .weui-cell.weui-cell_access.weui-cell_link
            nuxt-link.weui-cell__bd(to="/") 进入商城
            span.weui-cell__ft
      div(v-if="showPage === 2")
        .weui-panel_bd(v-for="item in list.list2")
           .a.weui-media-box.weui-media-box_appmsg
            .weui-media-box__hd
              img.weui-media-box__thumb(:src="'/img/' + item.icon")
            .weui-media-box__bd
                h4.weui-media-box__title {{item.title}}
                p.weui-media-box__desc {{item.intro}}
      div(v-if="showPage === 3")
        .weui-panel_bd(v-for="item in list.list3")
           .a.weui-media-box.weui-media-box_appmsg
            .weui-media-box__hd
              img.weui-media-box__thumb(:src="'/img/' + item.icon")
            .weui-media-box__bd
                h4.weui-media-box__title {{item.title}}
                p.weui-media-box__desc {{item.intro}}

</template>
<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      showPage: 1,
      imgs: [
        { img: '1.jpg', title: '连袜裤怎么穿都土？简单几招帮你化解' },
        { img: '2.jpg', title: '222' },
        { img: '3.jpg', title: '3333' }
      ],
      list: {
        list1: [
          { icon: 'logo.png', title: '基本清单款1', intro: '四季及不同风格的基本清单' },
          { icon: 'logo.png', title: '基本清单款1', intro: '四季及不同风格的基本清单四季及不同风格的基本清单四季及不同风格的基本清单四季及不同风格的基本清单' },
          { icon: 'logo.png', title: '基本清单款1', intro: '四季及不同风格的基本清单' }
        ],
        list2: [
          { icon: 'logo.png', title: '基本清单款2', intro: '四季及不同风格的基本清单' },
          { icon: 'logo.png', title: '基本清单款2', intro: '四季及不同风格的基本清单四季及不同风格的基本清单四季及不同风格的基本清单四季及不同风格的基本清单' },
          { icon: 'logo.png', title: '基本清单款2', intro: '四季及不同风格的基本清单' }
        ],
        list3: [
          { icon: 'logo.png', title: '基本清单款3', intro: '四季及不同风格的基本清单' },
          { icon: 'logo.png', title: '基本清单款3', intro: '四季及不同风格的基本清单四季及不同风格的基本清单四季及不同风格的基本清单四季及不同风格的基本清单' },
          { icon: 'logo.png', title: '基本清单款3', intro: '四季及不同风格的基本清单' }
        ]
      },

      swiperConfig: {
        autoplay: true,
        direction: 'horizontal',
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          dynamicBullets: true,
          clickable: true
        }
      },
      swipeOptions: {
        startSlide: 0,
        speed: 300,
        auto: 4000,
        continuous: true,
        disableScroll: false,
        stopPropagation: false,
        callback: function(index, slide) { console.log('slide changes') },
        transitionEnd: function(index, slide) { console.log('slide transition ends') }
      }
    }
  },
  head() {
    return {
      title: 'pan式爱美哲学'
    }
  },
  computed: {
    ...mapState([
      'panHome'
    ])
  },
  methods: {
    handlePage(pagNum) {
      this.showPage = pagNum
    }
  },

  beforeCreate() {
    this.$store.dispatch('fetchPanHome')
  }
}
</script>
<style scoped lang="sass" src="~/static/sass/pan.sass">

</style>







